<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
      stripe
      border
      :row-style="{ height: '0px' }"
      :cell-style="{ padding: '0px' }"
      style="width: 98%; margin-bottom: 20px; margin-left: 20px"
    >
      <el-table-column label="支付方式" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.payType == 'wechat'">微信支付</span>
          <span v-if="scope.row.payType == 'alipay'">支付宝支付 </span>
          <span v-if="scope.row.payType == 'accountpay'">账户支付 </span>
          <span v-if="scope.row.payType == 'offline'">线下转账 </span>
        </template>
      </el-table-column>
      <el-table-column prop="payName" label="名称" min-width="250">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.payType == 'accountpay'">--</span>
            <span v-else>{{ scope.row.payName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="添加时间"
        min-width="160"
      ></el-table-column>
      <el-table-column
        prop="status"
        label="当前状态"
        min-width="120"
      ></el-table-column>
      <el-table-column label="操作" min-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <!-- <el-button
                type="text"
                v-if="
                  scope.row.payType == 'wechat' || scope.row.payType == 'alipay'
                "
                @click="handleEdit(scope.row)"
                >修改</el-button
              > -->
          <el-button type="text" @click="detail(scope.row)">查看</el-button>
          <!-- <el-button
                type="text"
                style="color: #f56c6c"
                @click="numDelete(scope.row, 1)"
                v-if="scope.row.status == '启用'"
                >停用</el-button
              >
              <el-button
                type="text"
                @click="numDelete(scope.row, 0)"
                v-if="scope.row.status == '停用'"
                >启用</el-button
              > -->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="titles" :visible.sync="dialogVisible" width="600px">
      <el-form ref="form" :rules="rules" :model="form" label-width="150px">
        <div>
          <el-row>
            <el-form-item label="支付方式" prop="payType">
              <el-select
                :disabled="disableds"
                @change="payChange"
                v-model="form.payType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <div style="clear: both"></div>
          </el-row>
        </div>
        <div v-if="type == 1">
          <el-form ref="form" :rules="rules1" :model="form" label-width="150px">
            <el-row>
              <el-form-item label="支付宝名称" prop="aliName">
                <el-input
                  :disabled="disabled"
                  v-model="form.aliName"
                  maxlength="30"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="支付宝账户" prop="aliNo">
                <el-input
                  :disabled="disabled"
                  @input="
                    (value) => {
                      form.aliNo = value.replace(/[\u4E00-\u9FA5]/g, '');
                    }
                  "
                  maxlength="50"
                  v-model="form.aliNo"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="支付宝token" prop="appId">
                <el-input
                  style="width: 320px"
                  :disabled="disabled"
                  v-model="form.appId"
                  resize="none"
                  type="textarea"
                  @input="
                    (value) => {
                      form.appId = value.replace(/[\u4E00-\u9FA5]/g, '');
                    }
                  "
                  maxlength="140"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="电子邮箱" prop="aliEmail">
                <el-input
                  :disabled="disabled"
                  v-model="form.aliEmail"
                  onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
                  autocomplete="off"
                  maxlength="30"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div v-if="type == 2">
          <el-row>
            <el-form-item label="微信名称" prop="wechatName">
              <el-input
                :disabled="disabled"
                v-model="form.wechatName"
                maxlength="30"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商户号" prop="subMchid">
              <el-input
                :disabled="disabled"
                onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                v-model="form.subMchid"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="秘钥" prop="appKey" v-if="false">
              <el-input
                :disabled="disabled"
                v-model="form.appKey"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="小程序Appid" prop="miniprogramAppid">
              <el-input
                :disabled="disabled"
                v-model="form.miniprogramAppid"
                @input="
                  (value) => {
                    form.miniprogramAppid = value.replace(/[\W]/g, '');
                  }
                "
                maxlength="50"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="小程序密钥" prop="miniprogramSecret">
              <el-input
                :disabled="disabled"
                v-model="form.miniprogramSecret"
                type="textarea"
                style="width: 320px"
                resize="none"
                @input="
                  (value) => {
                    form.miniprogramSecret = value.replace(
                      /[\u4E00-\u9FA5]/g,
                      ''
                    );
                  }
                "
                rows="3"
                autocomplete="off"
                maxlength="2048"
              ></el-input>
            </el-form-item>
          </el-row>
        </div>
        <div v-if="type == 3">
          <el-row v-if="showBoolInput == true" class="openBank">
            <el-form-item label="收款账户名称" prop="accountName">
              <el-input
                :readonly="true"
                :disabled="disabled"
                v-model="form.accountName"
              ></el-input>
            </el-form-item>
            <el-form-item label="收款账户" prop="accountNo">
              <el-input
                :readonly="true"
                :disabled="disabled"
                v-model="form.accountNo"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="收款银行名称" prop="bankName">
              <el-input
                :readonly="true"
                :disabled="disabled"
                v-model="form.bankName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="收款支行名称" prop="openBank">
              <el-input
                :readonly="true"
                :disabled="disabled"
                v-model="form.openBank"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <div style="clear: both"></div>
          </el-row>

          <div class="real" v-if="showBoolInput == false">
            该机构未实名，如需配置该支付方式请联系该机构；
          </div>
        </div>
        <div v-if="type == 4"></div>
      </el-form>
      <div style="clear: both"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure()" :disabled="que"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      disableds: false,
      disabled: false,
      dialogVisible: false,
      type: "",
      showBoolInput:true,
      form: {
        name: "",
        officeUid: localStorage.getItem("uid"),
      },
      options: [
        {
          value: "alipay",
          label: "支付宝",
        },
        // {
        //   value: "wechat",
        //   label: "微信",
        // },
        {
          value: "offline",
          label: "线下转账",
        },
        {
          value: "accountpay",
          label: "账户支付",
        },
      ],
    };
  },
  created() {
    this.list();
  },
  methods: {
    list() {
      let officeUid = localStorage.getItem("uid");
      axios
        .post("/api/office/getPayInfoList", {
          officeUid: officeUid,
        })
        .then((res) => {
          if (res.data.code == "0000") {
            console.log("获取的数据");
            this.tableData = res.data.data;
            for (var s = 0; s < this.tableData.length; s++) {
              this.tableData[s].status =
                this.tableData[s].status == 0 ? "启用" : "停用";
            }
            this.total = res.data.total;
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        });
    },

    // 查看
    detail(val) {
      axios
        .post("/api/office/getPayType", {
          officeUid: val.oemUid,
          payType: val.payType,
        })
        .then((res) => {
          if (res.data.code == "0000") {
            console.log("点击了");
            if (res.data.data.payType == "accountpay") {
              console.log("进入这里");
              setTimeout(() => {
                this.options.push({
                  value: "accountpay",
                  label: "账户支付",
                });
              }, 200);
            }
            this.form = res.data.data;
            this.titles = "查看支付方式";
            this.payChange(res.data.data.payType);
            this.disabled = true;
            this.disableds = true;
            this.dialogVisible = true;
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        });
    },
    payChange(val) {
      console.log(val);
      this.que = false;
      this.options = [
        {
          value: "alipay",
          label: "支付宝",
        },
        // {
        //   value: "wechat",
        //   label: "微信",
        // },
        {
          value: "offline",
          label: "线下转账",
        },
        {
          value: "accountpay",
          label: "账户支付",
        },
      ];
      // this.clearValidate('form')
      if (val == "alipay" || this.form.payType == "alipay") {
        this.rules1 = {
          payType: [
            { required: true, message: "请选择启用类型", trigger: "blur" },
          ],
          aliName: [
            { required: true, message: "请输入支付宝名称", trigger: "blur" },
          ],
          aliNo: [
            { required: true, message: "请输入支付宝账号", trigger: "blur" },
          ],
          appId: [
            { required: true, message: "请输入支付宝token", trigger: "blur" },
          ],
          aliEmail: [
            { required: true, message: "请输入电子邮箱", trigger: "blur" },
          ],
        };
        this.type = 1;
      } else if (val == "wechat" || this.form.payType == "wechat") {
        this.rules = {
          payType: [
            { required: true, message: "请选择启用类型", trigger: "blur" },
          ],
          appKey: [{ required: true, message: "请输入秘钥", trigger: "blur" }],
          wechatName: [
            { required: true, message: "请输入微信名称", trigger: "blur" },
          ],
          subMchid: [
            { required: true, message: "请输入商户号", trigger: "blur" },
          ],
          miniprogramAppid: [
            { required: true, message: "请输入小程序appid", trigger: "blur" },
          ],
          miniprogramSecret: [
            { required: true, message: "请输入密钥", trigger: "blur" },
          ],
        };
        this.type = 2;
      } else if (val == "offline") {
        // var oemUid = localStorage.getItem("uid");
        this.rules = {
          accountName: [
            { required: true, message: "请输入名称", trigger: "blur" },
          ],
          accountNo: [
            { required: true, message: "请输入收款账户", trigger: "blur" },
          ],
          bankName: [
            { required: true, message: "请输入银行名称", trigger: "blur" },
          ],
          openBank: [
            { required: true, message: "请输入支行名称", trigger: "blur" },
          ],
        };
        this.type = 3;
        this.getPayInfo();
      } else {
        this.type = 4;
      }
      ///this.$refs.form.resetFields();
    },
    getPayInfo() {
      var oemUid = localStorage.getItem("uid");
      axios
        .post("/api/office/getOemBankInfo", {
          oemUid: oemUid,
        })
        .then((res) => {
          console.log("获取的线下支付方式");
          console.log(res);
          if (res.data.code == "0000") {
            console.log("进行赋值");
            var val = (res.data.data.payType = "offline");
            this.form = res.data.data;
          } else {
            this.showBoolInput = false;
            this.que = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.content {
  min-width: calc(100% - 60px);
  height: 100vh;
}
/deep/ .el-dialog {
  height: 450px;
  position: relative;
}
/deep/ .el-dialog__footer {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
/deep/ .el-form-item {
  margin-bottom: 20px;
}
/* .buttons {
  margin-top: 20px;
} */
/deep/ .el-input {
  width: 320px;
}
/deep/ .el-input__inner {
  width: 100%;
}
.real {
  text-align: left;
  padding-left: 159px;
  color: red;
  transform: translateY(-16px);
}
.addPay {
  padding: 10px 5px;
}
.aHref {
  cursor: pointer;
  text-decoration: underline;
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: none !important;
}
/deep/ .openBank .el-form-item__error {
  display: none !important;
}
</style>
